<template>
	<view class="content">
		<view class="header">
			<view class="search">
				<view class="icon">
					<image src="https://wx.caobenjiankang.com/image/technicianadd/search.png" mode="aspectFit"></image>
				</view>
				<input class="uni-input font28" focus placeholder-style="font-size: 28rpx;" @blur="blur" />
				<view class="title font28" @click="getData()">
					查询
				</view>
			</view>
		</view>
		<view class="box">
			<view class="item" v-for="(item,index) in list" :key="item.id" v-if="list.length > 0">
				<view class="left">
					<view class="title font28 font500">
						订单号: {{item.order_code}}
					</view>
					<!-- <view class="y">
						<view class="icon">
							<image src="https://wx.caobenjiankang.com/image/1.png" mode="aspectFit"></image>
						</view>
					</view> -->
				</view>
				<view class="k_info">
					<view class="cardType">
						<view class="type font26">
							名称:{{item.goods[0].goods_name}}
						</view>
						<view class="num font26">
							价格:{{item.goods[0].price}}
						</view>
					</view>
					<view class="c_status">
						<view class="status font26">
							数量:{{item.goods[0].num}}
						</view>
						<view class="shop font26">
							消费时间:{{item.create_time}}
						</view>
					</view>
				</view>
				<!-- <view class="info"> -->
				<!-- <view class="money font26">
						账面余额:<text class="font34" style="font-weight: bold;">{{item.balance}}</text>（赠送:{{item.cash}}）
					</view> -->
				<!-- <view class="describe">
						<view class="keyong font26">
							可用次数：{{item.k_yong}}
						</view>
						<view class="jifen font26">
							积分：{{item.zhifen}}
						</view>
						<view class="youhui font26">
							优惠券：{{item.you}}
						</view>
					</view> -->
				<!-- </view> -->
				<!-- 	<view class="tips font28">
					{{item.mark}}
				</view> -->
			</view>
			<view class="font32 fontw" style="color:#969696;text-align: center;" v-else>
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		onPageScroll() {

		},
		computed: mapState({
			userPageType: state => state.user.userPageType,
		}),
		data() {
			return {
				list: []
			};
		},
		onLoad(op) {
			this.getData(op.id)
		},
		methods: {
			async getData(id) {
				const data = await this.$api.technicianadd.userFilesOrder({
					id: id
				})
				console.log(data, 'data');
				this.list = data
			},
			blur(e) {
				console.log(e.detail.value);
				this.phone = e.detail.value
			},
			change(e) {
				console.log('弹窗打开状态：', e);
			},
		}
	}
</script>

<style lang="scss">
	.content {
		.header {
			display: flex;
			align-items: center;
			padding: 41rpx 32rpx 30rpx 32rpx;
			background-color: #fff;
			margin-bottom: 15rpx;
			position: sticky;
			top: 0;

			.drop_down {
				padding: 21rpx 0 19rpx 26rpx;

				/deep/.uv-sticky {
					border-right: 2rpx solid #ddd;
					padding-right: 24rpx;

					.uv-sticky__content {
						.uv-drop-down {
							border-bottom: unset;

							.uv-drop-down-item {
								padding: unset;
							}
						}
					}
				}
			}

			.search {
				display: flex;
				align-items: center;
				padding: 21rpx 26rpx 21rpx 24rpx;
				flex: 1;

				.icon {
					width: 22rpx;
					height: 24rpx;
					display: flex;
					align-items: center;

					image {
						width: 22rpx;
						height: 24rpx;
					}
				}

				.uni-input {
					padding: 0 8rpx;
					flex: 1;
				}
			}
		}

		.box {
			padding: 0 35rpx;

			.item {
				padding: 35rpx 23rpx 40rpx 38rpx;
				background-color: #fff;
				margin-bottom: 15rpx;
				border-radius: 16rpx;

				.left {
					justify-content: space-between;
					border-bottom: 2rpx solid #C6C6C6;
					padding-bottom: 26rpx;

					.title {}

					.y {
						display: flex;
						align-items: center;

						.text {
							color: #1EB481;
							margin-right: 8rpx;
						}

						.icon {
							width: 13rpx;
							height: 24rpx;
							display: flex;
							align-items: center;

							image {
								width: 13rpx;
								height: 24rpx;
							}
						}
					}
				}

				.k_info {
					padding: 37rpx 0 38rpx 0;
					border-bottom: 2rpx solid #C6C6C6;
					display: flex;
					align-items: center;

					.cardType {
						width: 50%;
						border-right: 2rpx solid #C6C6C6;

						.type {
							margin-bottom: 18rpx;
						}

						.num {}
					}

					.c_status {
						margin-left: 72rpx;

						.status {
							margin-bottom: 18rpx;
						}

						.shop {}
					}
				}

				.info {
					padding: 37rpx 0 39rpx 0;
					border-bottom: 2rpx solid #C6C6C6;

					.money {
						margin-bottom: 27rpx;
					}

					.describe {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.keyong {}

						.jifen {}

						.youhui {}
					}
				}

				.tips {
					margin-top: 38rpx;
					color: #1EB481;
				}
			}
		}
	}
</style>